<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>图文宝</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="${request.contextPath}/statics/css/bootstrap.min.css">
    <link rel="stylesheet" href="${request.contextPath}/statics/css/font-awesome.min.css">
    <link rel="stylesheet" href="${request.contextPath}/statics/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="${request.contextPath}/statics/css/all-skins.min.css">
    <link rel="stylesheet" href="${request.contextPath}/statics/css/main.css">
    <link rel="stylesheet" href="${request.contextPath}/statics/plugins/element/element.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<!-- ADD THE CLASS layout-boxed TO GET A BOXED LAYOUT -->
<body class="hold-transition skin-blue sidebar-mini layout-top-nav" style="overflow-y: hidden;">
<!-- Site wrapper -->
<div class="wrapper" id="rrapp" v-cloak>
    <header class="main-header">
        <nav class="navbar navbar-static-top">
            <div class="container-fluid">
                <!--左侧LOG-->
                <div class="navbar-header">
                    <a href="" class="navbar-brand"><b>图文宝</b></a>
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                            data-target="#navbar-collapse">
                        <i class="fa fa-bars"></i>
                    </button>
                </div>

                <!-- 菜单项 -->
                <div class="collapse navbar-collapse" id="navbar-collapse">
                    <!--中间动态菜单-->
                    <ul class="nav navbar-nav my-menu">
                            <menu-item :item="item" :index="index" @zy-menu-click="zyMenuClick" v-for="(item,index) in menuList"></menu-item>
                    </ul>
                    <!--顶部右侧菜单-->
                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown messages-menu">
                            <a href="####" title="跳转购买页面" onclick="window.location='/jumpMallIndex'" class="dropdown-toggle" data-toggle="dropdown">
                                商城&nbsp;<i class="fa fa-cart-plus" aria-hidden="true"></i>
                            </a>
                        </li>
                        <!-- 信息下拉-->
                        <li class="dropdown messages-menu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <i class="fa fa-envelope-o"></i>
                                <span class="label label-success">{{message.count}}</span>
                            </a>
                            <ul class="dropdown-menu" style="width: 500px;">
                                <li class="header">
                                    <h4 v-if="message.count >0">你有{{message.count}}条新消息</h4>
                                    <h4 v-else>暂无新消息</h4>
                                </li>
                                <li>
                                    <!-- inner menu: contains the actual data -->
                                    <ul class="menu" v-for="item in message.items">
                                        <li><!-- start message -->
                                            <a href="#">
                                                <div class="pull-left">
                                                    <i class="fa fa-ellipsis-v"></i>
                                                    <i class="fa fa-ellipsis-v"></i>
                                                    {{item.messageTypeTxt}}
                                                </div>
                                                <h4 style="padding-left: 50px">
                                                    {{item.title}}
                                                    <small><i class="fa fa-clock-o"></i> {{item.displayDate}}</small>
                                                </h4>
                                                <!--<p>Message Excerpt</p>-->
                                            </a>
                                        </li><!-- end message -->
                                    </ul>
                                </li>
                                <li class="footer">
                                    <div style="padding-left: 180px;margin: 5px" v-show="message.count >0">
                                        <button type="button" @click="lookAll" class="btn  btn-success btn-xs">查看全部</button>
                                        <button type="button" @click="markupRead" class="btn  btn-danger btn-xs">标记已读</button>
                                    </div>
                                </li>
                            </ul>
                        </li>
                        <!-- 通知下拉信息 -->
                        <!--<li class="dropdown notifications-menu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <i class="fa fa-bell-o"></i>
                                <span class="label label-warning">{{message.count}}</span>
                            </a>
                            <ul class="dropdown-menu">
                                <li class="header">你有{{message.count}}条新消息</li>
                                <li>
                                    &lt;!&ndash; inner menu: contains the actual data &ndash;&gt;
                                    <ul class="menu">
                                        <li v-for="item in message.items">
                                            <a href="#">
                                                <i class="fa fa-users text-aqua"></i>{{item.title}}
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="footer"><a href="#">查看全部</a></li>
                            </ul>
                        </li>-->
                        <!-- 任务下拉信息 -->
                        <!--<li class="dropdown tasks-menu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <i class="fa fa-flag-o"></i>
                                <span class="label label-danger">9</span>
                            </a>
                            <ul class="dropdown-menu">
                                <li class="header">You have 9 tasks</li>
                                <li>
                                    &lt;!&ndash; inner menu: contains the actual data &ndash;&gt;
                                    <ul class="menu">
                                        <li>&lt;!&ndash; Task item &ndash;&gt;
                                            <a href="#">
                                                <h3>
                                                    设计按钮
                                                    <small class="pull-right">20%</small>
                                                </h3>
                                                <div class="progress xs">
                                                    <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                                                        <span class="sr-only">20% Complete</span>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>&lt;!&ndash; end task item &ndash;&gt;
                                        ...
                                    </ul>
                                </li>
                                <li class="footer">
                                    <a href="#">View all tasks</a>
                                </li>
                            </ul>
                        </li>-->
                        <!-- 用户下拉信息 -->
                        <li class="dropdown user user-menu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <img src="${request.contextPath}/statics/img/logo_6.png" class="user-image"
                                     alt="User Image">
                                <span class="hidden-xs">{{user.username}}</span>
                            </a>
                            <ul class="dropdown-menu">
                                <!-- User image -->
                                <li class="user-header">
                                    <img src="${request.contextPath}/statics/img/logo_6.png" class="img-circle"
                                         alt="User Image">
                                    <p>
                                        {{user.username}}
                                    </p>
                                </li>
                                <!-- Menu Body -->
                                <!--<li class="user-body">
                                    &lt;!&ndash;<div class="col-xs-4 text-center">
                                        <a href="#">Followers</a>
                                    </div>
                                    <div class="col-xs-4 text-center">
                                        <a href="#">Sales</a>
                                    </div>
                                    <div class="col-xs-4 text-center">
                                        <a href="#">Friends</a>
                                    </div>&ndash;&gt;
                                </li>-->
                                <!-- Menu Footer-->
                                <li class="user-footer">
                                    <div class="pull-left">
                                        <a href="javascript:;" @click="updatePassword"><i class="fa fa-lock"></i> &nbsp;修改密码</a></a>
                                    </div>
                                    <div class="pull-right">
                                        <a href="logout"><i class="fa fa-sign-out"></i> &nbsp;退出系统</a>
                                    </div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
    </header>
    <!-- 内容区域 -->
    <el-tabs v-model="menuTab" type="border-card" closable
             @tab-remove="removeMenuTab"
    >
        <el-tab-pane
                v-for="(item, index) in menuTabList"
                :key="item.url"
                :name="item.url"
                :label="item.title"
        >
            <section class="content" style="background:#fff;padding-right: 0px;">
                <iframe :id="item.url" :name="item.url" scrolling="yes" frameborder="0"
                        style="overflow: hidden; width:100%;min-height:200px;overflow:visible;background:#fff;"
                        @load="loadFrame"
                        :src="item.url" >
                </iframe>
            </section>
        </el-tab-pane>
    </el-tabs>
    <!--  <div class="content-wrapper">

          &lt;!&ndash; /.content &ndash;&gt;
      </div>-->
    <!-- /.content-wrapper -->

    <!--<footer class="main-footer">-->
    <!--<div class="pull-right hidden-xs">-->
    <!--Version 3.2.0-->
    <!--</div>-->
    <!--Copyright &copy; 2018 <a href="http://www.11ziyun.com" target="_blank">紫云</a> All Rights Reserved-->
    <!--</footer>-->

    <!-- Add the sidebar's background. This div must be placed
         immediately after the control sidebar -->

    <!-- 修改密码 -->
    <div id="passwordLayer" style="display: none;">
        <form class="form-horizontal">
            <div class="form-group">
                <div class="form-group">
                    <div class="col-sm-2 control-label">账号</div>
                    <span class="label label-success" style="vertical-align: bottom;">{{user.username}}</span>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">原密码</div>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" v-model="password" placeholder="原密码"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">新密码</div>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" v-model="newPassword" placeholder="新密码"/>
                    </div>
                </div>
            </div>
        </form>
    </div>

</div>
<!-- ./wrapper -->

<script src="${request.contextPath}/statics/libs/jquery.min.js"></script>
<script src="${request.contextPath}/statics/libs/vue.min.js"></script>
<script src="${request.contextPath}/statics/libs/router.js"></script>
<script src="${request.contextPath}/statics/libs/bootstrap.min.js"></script>
<script src="${request.contextPath}/statics/libs/app.js"></script>
<script src="${request.contextPath}/statics/plugins/layer/layer.js"></script>
<script src="${request.contextPath}/statics/js/index.js?_${.now?long}"></script>
<script src="${request.contextPath}/statics/plugins/element/element.js"></script>
</body>
</html>
<style>
    .el-tabs--border-card>.el-tabs__content {
        padding: 0px;
    }
    /*ul.nav li.actives.active{background: #ffffff;}*/
    div.menu_pos{display: none;    position: absolute;
        top: 0;
        bottom: -5px;
        left: 0;
        right: 0;
        z-index: 99999999;
        /*display: none;*/
        background-color: rgba(200,0,0,0);}

    .nav_contain{border: 1px solid #1e98e2;border: 1px solid #1e98e2;position: absolute;top: 50px;background-color: #d2f2ff;overflow: hidden;}
    .nav>li div.nav_contain ul.menu{width: 100%;/*overflow: hidden;*/padding-left: 0;}
    .nav>li div.nav_contain ul.menu li.nav_type{list-style: none;float: left;width:120px;text-align: center;line-height: 30px;
        background-color: #1e98e2;color: #ffffff;border-right: 1px solid #6dd3fc;position: relative;}
    .nav>li div.nav_contain ul.menu li.nav_type:last-child{border-right: none;}
    .nav>li div.nav_contain ul.menu li.nav_type ul.lists{position: absolute;top: 30px;width: 100%;padding-left: 0;    border-right: 1px solid #6dd3fc;}
    .nav>li div.nav_contain ul.menu li.nav_type ul.lists li{list-style: none;background-color: #d2f2ff;border-bottom: 1px dotted #4c4c4c;color: black;height: 30px;}
    .nav>li div.nav_contain ul.menu li.nav_type ul.lists li a{display: inline-block;width: 100%;height: 100%;color: black;}
    .nav>li div.nav_contain ul.menu li.nav_type ul.lists li a:hover{background: #2FB5F7;}
</style>
